/// _responsive-sidenav.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

/**
 * Sidenav is taking a full row when top navbar is collapsed. It takes a lot of
 * space but at least it's usable on a mobile device.
 */

@media (max-width: 767px) {
  /**
   * No margin on any screen resolution.
   */
  .sidenav-fluid {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
}

@media (max-width: $navbarCollapseWidth) {
  /**
   * Let the very small sidenav larger since we use a full row.
   * This applies to the icon-based sidenav.
   */
  .sidenav-fluid .row-fluid .span1 {
    @include grid-fluid-span(4, $fluidGridColumnWidth, $fluidGridGutterWidth);
  }
  
  /**
   * Let the sidenav take the full row's width.
   */
  .sidenav-fluid .row-fluid .span3 {
    @include grid-fluid-span(18, $fluidGridColumnWidth, $fluidGridGutterWidth);
  }

  /**
   * Let the sidenav take the remaining space of the the row.
   * .span1 is converted to a .span4, so we have 14 columns left out of 18.
   */
  .sidenav-fluid .row-fluid .offset1.span3 {
    @include grid-fluid-span(14, $fluidGridColumnWidth, $fluidGridGutterWidth);
  }

  /**
   * Sidenav offsets are ignored when navbar is collapsed.
   */
  .sidenav-fluid .row-fluid [class*="offset"] {
    margin-left: 0 !important;
  }

  .sidenav-fluid {
    @include gradient-vertical($navbarInverseBackgroundHighlight, lighten($navbarInverseBackground, 10%));    
  }

  /**
   * Disabled rollover effects on mobile devices.
   */
  .sidenav-category-extend {
    display: none !important;
  }

  .row-fluid .span18-navbarcollapse:first-child {
    margin-left: 0;
    @include grid-fluid-span(18, $fluidGridColumnWidth, $fluidGridGutterWidth);
  }
}

@media (min-width: $navbarCollapseDesktopWidth) {
  /**
   * Fixed sidenav spans on desktops
   */
  .sidenav {
    position: fixed;
  }
}
